<template>
  <div>
    <div class="coverbg" v-if="bgcover"></div>
    <table-title tableTitle="课程信息"></table-title>
    <div class="base_wrap">
      <div class="base_form">
        <el-form ref="mycourseform" :model="formObj" :rules="formRules">
          <el-form-item label="课程名称" prop="Cname">
            <el-input v-model="formObj.Cname"></el-input> <span>60以内</span>
          </el-form-item>
          <el-form-item label="课程描述" prop="Cdescribe">
            <el-input v-model="formObj.Cdescribe"></el-input>
            <span>60以内</span>
          </el-form-item>
          <el-form-item label="课程价格" prop="Cprice">
            <el-input v-model="formObj.Cprice"></el-input> <span>60以内</span>
          </el-form-item>
          <el-form-item label="专业选择">
            <el-select v-model="formObj.CategoryOne">
              <el-option
                v-for="item in opt1"
                :label="item.label"
                :value="item.value"
                :key="item"
              ></el-option>
            </el-select>
            <el-select v-model="formObj.CategoryTwo">
              <el-option
                v-for="item in opt2"
                :label="item.label"
                :value="item.value"
                :key="item"
              ></el-option>
            </el-select>
            <el-select v-model="formObj.CategoryThree">
              <el-option
                v-for="item in opt3"
                :label="item.label"
                :value="item.value"
                :key="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="success" @click="saveCourse">保存</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="base_img">
        <div class="cover">
          <h4>课程封面：</h4>
          <img :src="`http://localhost:3000${cacheName}`" />
          <div class="img_ctrl">
            <el-link type="danger">清除</el-link>
            <el-link type="success" @click="coverFlag = true">上传</el-link>
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="课程封面选择" width="40%" :visible.sync="coverFlag">
      <div class="select_img" v-show="imgFlag">
        <input
          type="file"
          ref="myfiles"
          accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
          hidden
          @change="imgChange"
        />
        <el-input disabled></el-input>
        <el-button type="success" @click="selImg">选择图片</el-button>
      </div>
      <div class="img_show" v-show="!imgFlag">
        <img :src="imgUrl" alt="" />
        <el-button type="success" @click="sureUpload">确定</el-button>
        <el-button type="danger">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import tableTitle from '../../components/tableTitle.vue'
// 混入的分类数据
import cateData from '../../utils/cate'
import { _upCourseImg, _saveCourse } from '../../api/courseadd'
export default {
  mixins: [cateData],
  props: ['couseInfo'],
  watch: {
    couseInfo (newVal) {
      this.formObj.Cname = newVal.Cname
      this.formObj.Cdescribe = newVal.Cdescribe
      this.formObj.Cprice = newVal.Cprice
      this.formObj.CategoryOne = newVal.CategoryOne
      this.formObj.CategoryTwo = newVal.CategoryTwo
      this.formObj.CategoryThree = newVal.CategoryThree
      this.cacheName = newVal.Cpic
      this.bgcover = true
    }
  },
  data () {
    return {
      coverFlag: false, //上传课程封面弹出层
      imgFlag: true,
      bgcover: false, //添加课程信息后的遮罩
      imgUrl: '', //缩略图
      cacheName: '', //上传返回的图片路径
      formObj: {
        //课程添加需要的v-model的数据
        Cname: '',
        Cdescribe: '',
        Cprice: '',
        CategoryOne: '',
        CategoryTwo: '',
        CategoryThree: ''
      },
      formRules: {
        //课程添加验证的
        Cname: { required: true, message: '课程名称必填', trigger: 'blur' },
        Cdescribe: { required: true, message: '课程名称必填', trigger: 'blur' },
        Cprice: { required: true, message: '课程名称必填', trigger: 'blur' }
      }
    }
  },
  components: {
    tableTitle
  },
  methods: {
    saveCourse () {
      // 表单验证
      this.$refs.mycourseform.validate(async valid => {
        if (valid) {
          //保存课程的接口
          this.formObj.Cpic = this.cacheName //课程封面
          if (this.cacheName) {
            var res = await _saveCourse(this.formObj)
            console.log(res)
            this.$message.success('课程信息添加成功')
            this.bgcover = true
            // 添加课程成功把课程ID和_id
            this.$router.push({
              name: 'courseadd',
              query: {
                _id: res._id, //课程的_id
                ID: res.ID //课程ID
              }
            })
          } else {
            this.$message.error('请上传课程封面')
          }
        }
      })
    },
    async sureUpload () {
      //确定上传 课程封面上传接口
      let files = this.$refs.myfiles.files[0] //文件数据包
      console.log(files)
      let formdata = new FormData()
      // formdata.append(key,value)
      formdata.append(new Date().getTime(), files)

      var res = await _upCourseImg(formdata)
      console.log(res)
      // 存储课程封面地址
      this.cacheName = res.cacheName
      this.coverFlag = false //关闭弹出层
    },
    selImg () {
      //弹出文件选择
      this.$refs.myfiles.click()
    },
    imgChange () {
      //选择图片事件
      this.imgFlag = false
      // 制作缩略图
      let files = this.$refs.myfiles.files[0] //文件内容
      console.log(files)
      //制作缩略图方法
      this.imgUrl = URL.createObjectURL(files)
      console.log(this.imgUrl)
    }
  }
}
</script>
<style lang="less">
.coverbg {
  width: 80%;
  height: 430px;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 80px;
  right: 0;
  z-index: 999;
}
.base_wrap {
  width: 80%;
  margin: 0 auto;
  display: flex;
  .base_form {
    width: 60%;
  }
  .base_img {
    width: 40%;
  }
  .el-form-item {
    margin-top: 30px;
    display: flex;
  }
  .el-input {
    width: 300px;
  }
  .el-select {
    width: 100px;
    margin-right: 20px;
    .el-input {
      width: 100px;
    }
  }
}
.base_img {
  .cover {
    margin-top: 50px;
    border: 1px solid #e5e5e5;
    text-align: center;
    width: 300px;
    img {
      width: 300px;
      height: 250px;
    }
    .img_ctrl {
      width: 300px;
      display: flex;
      justify-content: space-between;
    }
  }
}
.img_show {
  img {
    width: 200px;
    height: 200px;
  }
}
</style>
